<!-- 职位要求 -->
<template>
  <div class="box" >
      <div class="search">
         <div class="search-content">
              <div class="search-left">
                  <el-input
                  placeholder="请输入搜索内容"
                  v-model="keyWord"
                  autocomplete
                  maxlength="20"
                  show-word-limit
                  />
              </div>
              <div class="search-right">
                  <button @click="searchKeyWord()">查询</button>
              </div>
         </div>
      </div>
      <div class="top">
          <div class="top-content">
              <div>
                  <button  @click="dialogFormVisible = true">增加+</button>
                  <button @click="delIsChecked()">批量删除-</button>    
              </div>
            
          </div>
      </div>
      <div class="content" ref="wrap">
        <el-table
          ref="multipleTable"
          :data="askType"
          border
          fit="false"
          stripe
          show-header
          highlight-current-row
          height="100%"
          :row-style="{height: '50px'}"
          @selection-change="handleSelectionChange"
          v-loading="isLoad"
        >
          <el-table-column type="selection" width="55" align="center" fixed />  
          <el-table-column property="askTypeName" label="职位要求类型" show-overflow-tooltip width="300" align="left"/>
          <!-- <el-table-column property="postName" label="职位名称" show-overflow-tooltip width="420" align="center"/> -->
          <el-table-column align="center" width="140" fixed="right">
            <template #header>
              操作
            </template>
            <template #default="scope">
                <!-- {{scope.row}} -->
              <el-button size="small" @click="dialogUpdate(scope.$index)">修改</el-button>
              <el-button size="small" type="danger" @click="delAsks(scope.$index,scope.row.askTypeId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="bottom">
          <el-pagination
              background
              layout="prev, pager, next"
              :page-size="pageSize"
              @current-change="changePage"
              @prev-click="changePage"
              @next-click="changePage"
              :total="pageTotals"
          >
          </el-pagination>
      </div>
  </div>
<!-- Form -->
      <el-dialog title="添加职位内容" v-model="dialogFormVisible" lock-scroll :close-on-click-modal="false"  show-close="true" destroy-on-close="false">
          <el-form ref="forms" :model="forms">
              <el-form-item label="要求类型" :label-width="formLabelWidth" width="100px">
                  <el-input v-model="askTypes.askTypeName" maxlength="10" autocomplete="off" class="el-input" ></el-input>
              </el-form-item>
          </el-form>
          <div class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="addPsotAsk()" >确 定</el-button>
          </div>
      </el-dialog>
      <el-dialog title="修改要求内容" v-model="dialogUpdatemVisible"  :close-on-click-modal="false" lock-scroll show-close="false">
          <el-form >
                <el-form-item label="要求类型" :label-width="formLabelWidth" width="100px">
                  <el-input v-model="companyPostChange.askTypeName" maxlength="10" autocomplete="off" class="el-input" ></el-input>
                </el-form-item>
          </el-form>
          <div class="dialog-footer">
              <el-button @click="dialogUpdatemVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogUpdated()">确 定</el-button>
          </div>
      </el-dialog>
</template>

<script>

import {
    getAllCompany,
    selectCompanyByPostId,
    getAllPage,
    getPositionAsk,
    selectAskType,
    delAsk,
    savePostAsk,
    selectCompanyPost,
    addAskType
} from '../../api/secondary_api/postAsk'
import {ElMessage } from 'element-plus'

export default{
  name:'Pageaddress',
   data() {
      return{
        isLoad:true,//加载页面
        pageNum:1,//页码
        pageSize:10,//页面总条数
        dialogUpdatemVisible: false,//修改弹框的显示
        dialogFormVisible: false,//修改增加弹框的显示
        pageTotals:0,//总页数
        keyWord:"",//模糊查询的条件
        PostAsk:null,
        companyPostChange:null,
        CompanyPost:[],//职位名称
        askCompanys:[],//查询的企业
        askType:[],
        askTypes:{
            askTypeId:0,
            askTypeName: "",
            tip: 0
        },
        askPost:{
            "postId":0,
            "askTypeId": 0,
            "tip": 0
        },
        multipleSelection: [],//被选中的行       
      }
  },
  methods: {
        // delIsChecked(){//批量删除
        //     this.multipleSelection.forEach((item,index)=>{
                
        //     })
        // },
        addPsotAsk(){
            this.dialogFormVisible = false;
            addAskType(this.askTypes).then(
                response=>{
                    console.log(response,"ssssssss");
                }
            );

        },
        delAsks(index,askTypeId){
            delAsk(askTypeId).then(
                response=>{
                    ElMessage({
                        message: '删除数据成功！',
                        type: 'success',
                    });  
                }
            );
            this.askType.splice(index,1);
            this.pageTotals = this.pageTotals-1;
            // this.isLoad =false;
           
        },
        dialogUpdate(i){//修改获取数据
            this.dialogUpdatemVisible=true;
            this.companyPostChange = this.askType[i];
      },
       dialogUpdated(){//修改后发送数据
           this.dialogUpdatemVisible = false;     
           this.askTypes = this.companyPostChange;
           console.log(this.askTypes.askTypeId,"111111111111");
         addAskType(this.askTypes).then(
              response=>{
                  if (response.code == 200) {
                     ElMessage({
                        message: '修改数据成功！',
                        type: 'success',
                    });
                  }else {
                      this.openError(response);
                  }
              }
          );
      },
      selectAskTypes(){//查询所有类型
        selectAskType(this.pageNum,this.pageSize,this.keyWord).then(
            response=>{
                 if(response.code == 200){
                     this.askType = response.data;
                }else{
                    ElMessage.error(response.msg);
                }
            }
        );
      },
        handleSelectionChange(val) {//全选
            this.multipleSelection = val;
        },
        changePage(e){//搜索分页切换
            this.pageNum = e;
            selectAskType(this.pageNum,this.pageSize,this.keyWord).then(
                response=>{
                    if(response.code == 200){
                        this.askType = response.data;
                    }else{
                            ElMessage.error(response.msg);
                    }
                }
            );
        },
        searchKeyWord(){//模糊查询
           selectAskType(this.pageNum,this.pageSize,this.keyWord).then(
                response=>{
                    if(response.code == 200){
                        this.askType = response.data;
                    }else{
                        ElMessage.error(response.msg);
                    }
                }
            );
        } ,
        searchCompany(){//查询所有
            this.isLoad = true;
            getAllPage().then(
                response=>{
                    if(response.code == 200){
                        setTimeout(()=>{
                            this.isLoad = false;
                        },1000)
                        
                    }else{
                        ElMessage.error(response.msg);
                    }
                }
            )
        }
    } ,  
    mounted(){
       selectAskType(this.pageNum,this.pageSize,this.keyWord).then(
            response=>{
                 if(response.code == 200){
                     this.askType = response.data;
                     console.log(this.askType);
                        ElMessage({
                            message: '查询到'+this.pageTotals+'条数据',
                            type: 'success',
                        });
                        this.isLoad =false;
                }else{
                        ElMessage.error(response.msg);
                }
            }
        );
        getAllPage().then(
                response=>{
                    if(response.code == 200){  
                        for (let index = 0; index < response.data.length; index++) {
                            if (response.data[index].tip ==1) {
                                this.pageTotals = this.pageTotals-1;
                                response.data.splice(index,1);
                            }
                        }
                            this.pageTotals = response.data.length-1;
                            this.askType = response.data;
                            this.isLoad = false;
                    }else{
                        ElMessage.error(response.msg);
                    }
                }
            );
    },  
  }
</script>

<style scoped>
  .box{
      width: 100%;
      /* height: calc(100vh - 151px); */
      font-style: 40px;
      overflow: hidden;
  }
  .top{
      width: 100%;
      padding: 0 2%;
      overflow: hidden;
  }
  .top-content{
      width: 96%;
      height: 35px;
      margin-top: 10px;
      overflow: hidden;
  }
   .top-content>div>button{
       width: 130px;
       height: 35px;
       line-height: 35px;
       color: #000;
       border-radius: 5px;
      border: 1px solid #fff;
   }
   button:hover{
       opacity: 0.5;
   }
    .top-content>div>button:nth-of-type(1){
        background-color: #00ffff;
   }
   .top-content>div>button:nth-of-type(2){
         background-color: red;
   }
   .search{
       width: 100%;
       padding: 0 2%;
       overflow: hidden;
   }
   .search-content{
       width: 96%;
       overflow: hidden;
       margin-top: 10px;
   }
   .search-left{
       width: 25%;
       float: left;
   }
  .search-right{
       width: 10%;
       float: left;
   }
   .search-left>.el-input{
       width: 100%;
   }
   .search-right>button{
       width: 100%;
       height: 32px;
       overflow: hidden;
       background-color: #00ffff;
       float: right;
      border: 1px solid #fff;
      border-radius: 5px;
   }
  .content{
      height: calc(100vh - 265px);
      margin-top: 5px;
      padding: 0 2%;
      position: relative;
      display: flex;
  }
 

  .delBtn{
      background-color: rgba(245, 6, 6, 0.973);
      color: #fff;
  }
   .editBtn{
      background-color: #0079f3;
      color: #fff;
  }
  .delBtn,.editBtn{
      width: 65px;
      height: 30px;
      line-height: 30px;
      border: 0px;
      border-radius: 5px;
      margin-left: 10px;
      border: 1px solid #fff;
  }
  .dialog-footer{
      margin-left:42%;
  }
  .addButton{
      width: 20px;
      height: 20px;
      font-size: 20px;
      line-height: 20px;
      background-color: #fff;
      position: absolute;
      right: 0;
  }
  .delButton{
      width: 20px;
      height: 20px;
      font-size: 20px;
      line-height: 20px;
      background-color: #fff;
      position: absolute;
      right: 30px;
  }
  .el-input{
      width: 50%; 
  }
  .el-input__count{
      height: 10%;
  }
  .bottom{
      margin: 20px 2%;
  }
  
</style>